<template>
  <div class="nothing-container">
    <van-empty 
      description="暂无订单" 
      image-size="160"
      class="nothing-empty"
    >
      <template #description>
        <div class="nothing-description">
          <p class="nothing-title">暂无订单</p>
          <p class="nothing-subtitle">您还没有任何订单记录</p>
        </div>
      </template>
    </van-empty>
  </div>
</template>

<script setup>
defineOptions({
  name: 'Nothing'
})
</script>

<style scoped lang="scss">
.nothing-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  
  .nothing-empty {
    .nothing-description {
      text-align: center;
      
      .nothing-title {
        font-size: 16px;
        color: #323233;
        margin-bottom: 8px;
        font-weight: 500;
      }
      
      .nothing-subtitle {
        font-size: 14px;
        color: #969799;
        margin: 0;
      }
    }
  }
}
</style>